<template>
	<view>
		<uni-section title="服务人员列表" type="line">
			<uni-list v-for="(employee, index) in employees" :key="index">

				<uni-list-item :title="'姓名：' + employee.servant_name" :note="'服务类型：' + employee.service_type + '\n联系电话：' + employee.servant_phone" :rightText="String(employee.service_price) + ' 元/小时'" />
			</uni-list>
		</uni-section>

	</view>
	<view>
		<uni-fab :pattern="pattern" :horizontal="horizontal" :vertical="vertical" :popMenu="false"
			@fabClick="fabClick"></uni-fab>
		<uni-popup ref="inputDialog" type="dialog">
			<view class="popup-card">
				<uni-forms ref="baseForm" :rules="rules" :modelValue="baseFormData" label-position="left">
					<view class="form-title"> 添加服务人员 </view>
					<uni-forms-item label-width="80px" label="姓名" required name="servant_name">
						<uni-easyinput v-model="baseFormData.servant_name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label-width="80px" label="联系电话" required name="servant_phone">
						<uni-easyinput v-model="baseFormData.servant_phone" placeholder="请输入联系电话" />
					</uni-forms-item>
					<uni-forms-item label-width="80px" label="金额" required name="service_price">
						<uni-easyinput v-model="baseFormData.service_price" placeholder="请输入金额" />
					</uni-forms-item>
					<uni-forms-item label-width="80px" label="服务类型" name="service_type">
						<uni-easyinput type="textarea" v-model="baseFormData.service_type" placeholder="请输入服务内容" />
					</uni-forms-item>
				</uni-forms>
				<button ref="inputClose" type="primary" @click="submit('baseForm')">提交</button>
			</view>

			<!-- <uni-popup-dialog ref="inputClose" mode="input" title="输入内容" value="对话框预置提示内容!" placeholder="请输入内容"
				@confirm="dialogInputConfirm"></uni-popup-dialog> -->
		</uni-popup>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#42B033',
					buttonColor: '#296752',
					iconColor: '#fff'
				},
				employees: [],
				baseFormData: {
					servant_name: '',
					servant_phone: '',
					service_type: '',
					service_price: ''
				},
				rules: {
					servant_name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					servant_phone: {
						rules: [{
							required: true,
							errorMessage: '联系电话不能为空'
						}, {
							format: 'number',
							errorMessage: '联系电话只能输入数字'
						}]
					},
					service_price: {
						rules: [{
							required: true,
							errorMessage: '金额不能为空'
						}, {
							format: 'number',
							errorMessage: '金额只能输入数字'
						}]
					}
				}
			}
		},
		onLoad() {
			this.fetchData();
		},
		methods: {
			fabClick() {
				this.$refs.inputDialog.open();
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					// uni.showToast({
					// 	title: `校验通过`
					// })

					// 关闭窗口后，恢复默认内容
					this.$refs.inputDialog.close()

					uni.showLoading({
						title: '人员信息添加中...'
					})

					this.employees.push({
						...this.baseFormData
					})
					// 新增阿姨
					uni.request({
						url: 'https://nbhs.linlilinwai.com/nbh_restful/service_administration/add_servant/', 
						method: "post",
						data: {
							name: this.baseFormData.servant_name,
							servant_phone: this.baseFormData.servant_phone,
							service_price: this.baseFormData.service_price,
							service_type: this.baseFormData.service_type,
						},
						success: (res) => {
							console.log(res.data);
						},
						fail: (err) => {
							console.log(err);
						}
					});

					setTimeout(() => {
						uni.hideLoading()
						this.baseFormData = {
							servant_name: '',
							servant_phone: '',
							service_type: '',
							service_price: ''
						}
						
					}, 2000)

				}).catch(err => {
					console.log('err', err);
				})
			},
			fetchData() {
				// 阿姨列表
				uni.request({
					url: 'https://nbhs.linlilinwai.com/nbh_restful/service_administration/get_servant_list/',
					method: "post",
					success: (res) => {
						this.employees = res.data.data;
						// console.log("阿姨列表：");
						// console.log(this.employees);
					},
					fail: (err) => {
						console.log(err);
					}
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.popup-card {
		background-color: #fff;
		padding: 40rpx;
		/* 设置内边距为20像素 */
		box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
		width: 550rpx;
		/* 在元素下方添加轻微的阴影 */
		color:$uni-bg-color;
		font-size: 16rpx;
	}
	.form-title {
		display: flex;
		justify-content: center;
		color: #606266;
		margin-bottom: 40rpx;
	}
</style>